<template>
  <div id="home">
    <nav-bar class="home-navbar" navbarBack="var(--color-tint)" navbarTextColor="var(--color-text-w)">
      <p class="home-navbar-title" slot="nav-bar-center">购物街</p>
    </nav-bar>
    <tab-control v-show="isTabFixed" ref="tabControl1" @tabControlItemClick="tabControlItemClick"
                 :titles="['流行', '新款', '精选']"/>
    <scroll class="home-scroll"
            ref="scroll"
            @scroll="chengScroll"
            @pullingUp="pullingUp"
            :probeType="3"
            :pullUpLoad="true">
      <home-swiper @swiperImageLoad="swiperImageLoad" :banner="banner"/>
      <home-recommend-view :recommended="recommend"/>
      <feature-view/>
      <tab-control v-show="!isTabFixed" ref="tabControl2" @tabControlItemClick="tabControlItemClick"
                   :titles="['流行', '新款', '精选']"/>
      <goods-list :goods="showGoods"/>
    </scroll>
    <back-top v-show="isBackTopShow" @click.native="backTopClick"/>
  </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";
  import Scroll from "components/common/scroll/Scroll";
  import BackTop from "components/common/backTop/BackTop";

  import GoodsList from "components/content/goods/GoodsList";
  import TabControl from "components/content/tabControl/TabControl";

  import HomeRecommendView from "./childComps/HomeRecommendView";
  import FeatureView from "./childComps/FeatureView";
  import HomeSwiper from "./childComps/HomeSwiper";

  import {getHomeMultiData, getHomeGoods} from "network/home";
  import {debounce} from "common/utils"


  import {backTop} from "common/mixin"


  export default {
    name: "Home",
    components: {
      BackTop,
      Scroll,
      GoodsList,
      NavBar,
      TabControl,
      HomeRecommendView,
      FeatureView,
      HomeSwiper,
    },
    data() {
      return {
        banner: null,
        dKeyword: null,
        keywords: null,
        recommend: null,
        tabOffsetTop: 0,//记录tabcontrol的OffsetTop的位置
        saveY: 0,//用来保存离开home页面时的滚动位置
        isTabFixed: false,
        currentType:
          'pop',
        goods:
          {
            "pop":
              {
                page: 0,
                list:
                  []
              }
            ,
            "new":
              {
                page: 0, list:
                  []
              }
            ,
            "sell":
              {
                page: 0, list:
                  []
              }
            ,
          }
        ,
      }
    },
    created() {
      //组件创建时
      this.getHomeMultiData();
      for (let i in this.goods) {
        this.getHomeGoods(i);
      }
      /*this.getHomeGoods('new');
      this.getHomeGoods('pop');
      this.getHomeGoods('sell');*/
    },
    mounted() {
      //组件被挂在到Dom上面时
      const refresh = debounce(this.$refs.scroll.refresh);
      this.$bus.$on("homeimgLoaded", () => {
        //进行防抖
        refresh();
      });

      this.$bus.$on("detailGoodsInfoLoad", () => {
        refresh();
      });
    },
    computed: {
      showGoods() {
        return this.goods[this.currentType].list;
      }
    },
    methods: {
      /**
       * 网络请求相关方法
       */
      getHomeMultiData() {
        getHomeMultiData().then(res => {
          this.banner = res.data.banner.list;
          this.dKeyword = res.data.dKeyword.list;
          this.keywords = res.data.keywords.list;
          this.recommend = res.data.recommend.list;
        }).catch(err => {
          console.log("getHomeMultiData请求失败，信息：" + err);
        })
      },
      getHomeGoods(type) {
        //每次获取数据时 给当前页加上一页
        const page = this.goods[type].page + 1;
        getHomeGoods(type, page).then(res => {
          //es6 语法 ...res.data.list  解耦 解开集合的数据 this.goods[type].list.push('a','b','c');
          this.goods[type].list.push(...res.data.list);
          //加载完成后  当前页+1
          this.goods[type].page += 1;
          //继续下拉加载更多
          this.$refs.scroll.finishPullUp();
        }).catch(err => {
          console.log("getHomeGoods请求失败，信息：" + err);
        })
      },
      /**
       * 事件监听方法
       */
      tabControlItemClick(index) {
        switch (index) {
          case 0:
            this.currentType = 'pop';
            break;
          case 1:
            this.currentType = 'new';
            break;
          case 2:
            this.currentType = 'sell';
            break;
        }
        this.$refs.tabControl1.activeIndex = index;
        this.$refs.tabControl2.activeIndex = index;
      },
      pullingUp() {
        this.getHomeGoods(this.currentType)
      },
      swiperImageLoad() {
        this.$nextTick(() => {
          console.log(this.$refs.tabControl2.$el.clientHeight);
          this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop - this.$refs.tabControl2.$el.clientHeight;
        })
      },
      chengScroll(position) {
        if (this.$route.path === "/home") this.isTabFixed = (-position.y) >= this.tabOffsetTop
        /*      if (this.$route.path === "/detail") this.$refs.detailNavBar.activeTitleIndex = (-position.y) >= this.tabOffsetTop*/

        /*listenShowBackTop 在混入文件mixin的backTop中*/
        this.listenShowBackTop(position);
      },
    },
    activated() {
      //活跃时
      this.$refs.scroll.refresh();
      this.$refs.scroll.scrollToY(this.saveY);
      console.log("滚动位置" + this.saveY);
    },
    deactivated() {
      //不活跃时
      this.saveY = this.$refs.scroll.getScrollY();
      console.log("记录位置" + this.saveY);
    },
    mixins: [backTop]
  }
</script>

<style scoped>
  #home {
    background: #eee;
    /*  padding-top: 0.44rem;*/
    height: 100vh;
  }

  .home-navbar {
    /*    position: fixed;
        left: 0;
        right: 0;
        top: 0;*/
    z-index: 9999;
  }

  .home-navbar-title {
    font-size: 18px;
  }

  .home-scroll {
    height: calc(100% - var(--tabbar-height));
    overflow: hidden;
  }

</style>
